import React from 'react'
import MidNav from 'component/MidNav'
import {Button, Input, Form} from 'antd'
import {actions} from 'mirrorx'

const FormItem = Form.Item

class App extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      edit: false,
      userData: {}
    }

    this.submitRequest = this.submitRequest.bind(this)
  }
  componentDidMount () {
    this.requestUserData()
  }

  requestUserData () {
    T.ajax({
      url: '/api/uc/user/getChannelInfo',
      loading: true,
      method: 'get'
    }).then((result) => {
      if (result.success) {
        let userData = result.data || {}
        this.setState({
          userData
        })
      }
    })
  }

  submitRequest (e) {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      console.log('values', values)
      if (err) return

      T.ajax({
        url: '/api/uc/user/updateInfo',
        loading: true,
        data: values
      }).then((result) => {
        if (result.success) {
          this.setState({
            edit: false
          }, () => {
            this.requestUserData()
            actions.mainModel.requestUserInfo()
          })
        }
      })
    })
  }

  nameLengthValidator (rule, value, callback) {
    if (value && value.length > 50) {
      callback && callback('50 characters limited')
    } else {
      callback && callback()
    }
  }

  render () {
    let windowHeight = T.getScreenHeight() - 36 - 70
    let dataList = [
      {
        name: 'Name',
        key: 'name',
        rules: [{ required: true, message: 'Please enter your name', whitespace: true },
          {pattern: T.regObj['username'], message: 'illegal symbol included'},
          {
            validator: this.nameLengthValidator
          }],
        maxLength: '50'
      },
      { name: 'Phone Number',
        key: 'phoneNumber',
        rules: [{ required: true, message: 'Please enter your phone number' }, {pattern: T.regObj['username'], message: 'illegal symbol included'}],
        maxLength: '32'
      },
      // {name: 'Company', key: 'channelCompanyName'},
      {name: 'Email', key: 'email', rules: [{ required: true, message: 'Please enter your phone email' }, {type: 'email', message: 'illegal symbol included'}], maxLength: '50'}
    ]
    const { getFieldDecorator } = this.props.form
    const {edit, userData} = this.state
    return (
      <div className='profile-wrap'>
        <MidNav title='Profile' />

        <div className='content-wrap' style={{minHeight: windowHeight}}>
          <Form>
            <div className='content-box' >
              <div className='tar' style={{width: 400}}>
                {!edit &&
                <Button type='primary' onClick={() => this.setState({edit: true})}>Edit</Button>
                }

                {edit &&
                <span>
                  <Button onClick={() => this.setState({edit: false})}>Cancel</Button>
                  <Button type='primary' onClick={this.submitRequest} className='ml10'>Save</Button>
                </span>

                }

              </div>
              {dataList.map((item, index) => {
                return (
                  <div className='mt15' key={index}>
                    <div className='name-div'>{item.name}</div>
                    {(!edit || item.key === 'email') &&
                    <div className='value-div'>{userData[item.key]}</div>
                    }
                    {edit && item.key !== 'email' &&
                    <FormItem>
                      {getFieldDecorator(item.key, {
                        initialValue: userData[item.key],
                        rules: item.rules
                      })(
                        <Input style={{width: 400, height: 50}} placeholder={'Please input your ' + item.name.toLowerCase()} maxLength={item.maxLength} />
                      )}
                    </FormItem>
                    }
                  </div>
                )
              })}
              <div className='f12 mt10' style={{color: '#FF8D26'}}>Please contact our customer service to change your email address.</div>

              <div className='icon-img-box'>
                <img src='/assets/images/icon_card.png' />
              </div>
            </div>
          </Form>
        </div>
      </div>
    )
  }
}

const FormWrapper = Form.create()(App)
export default FormWrapper
